<template>
  <div class="dashboard">
    <!-- 标题 -->
    <h1>数聚视界 业务大屏</h1>
    <!-- 左中右布局容器 -->
    <div class="layout-container">
      <!-- 左侧区域 -->
      <div class="left-section">
        <BarChart class="bar-chart" />
        <LineChart class="line-chart" />
      </div>
      <!-- 中间区域 -->
      <div class="middle-section">
      </div>
      <!-- 右侧区域 -->
      <div class="right-section">
        <BarChart class="bar-chart" />
        <LineChart class="line-chart" />
      </div>
    </div>
  </div>
</template>

<script setup>
import BarChart from "@/components/BarChart.vue";
import LineChart from "@/components/LineChart.vue";
</script>

<style scoped>
/* 仪表盘整体样式 */
.dashboard {
  text-align: center;
  padding-top: 20px; /* 标题距离顶部 20px */
}

/* 标题样式 */
.dashboard h1 {
  margin: 0;
  color: #ffffff;
  line-height: 56px;
  font-size: 56px;
  font-weight: 500;
}

/* 左中右布局容器样式 */
.layout-container {
  display: flex; /* 使用 flexbox 布局 */
  justify-content: space-between; /* 左右两侧区域贴边，中间区域自动分配空间 */
  gap: 20px; /* 区域之间的间距 */
  padding: 20px; /* 容器内边距 */
}

/* 左侧区域样式 */
.left-section {
  flex: 1; /* 占据 1 份空间 */
  display: flex;
  flex-direction: column;
  gap: 20px; /* 图表之间的间距 */
}

/* 中间区域样式 */
.middle-section {
  flex: 2; /* 占据 2 份空间，比左右两侧更宽 */
}

/* 右侧区域样式 */
.right-section {
  flex: 1; /* 占据 1 份空间 */
  display: flex;
  flex-direction: column;
  gap: 20px; /* 图表之间的间距 */
}

/* 图表样式 */
.bar-chart,
.line-chart,
.large-chart {
  width: 100%; /* 图表宽度占满父容器 */
  height: 200px; /* 图表高度，可根据实际情况调整 */
}
</style>

<style>
@import "@/assets/styles/global.css";
</style>